<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>子组件给父组件传值</title>
</head>

<body>
  <div id="app" style="border: 1px solid red; padding: 10px;">
    <h1>新闻列表</h1>
    <!-- 引入父组件 -->
    <news-list></news-list>
  </div>
  <!-- 父组件模板 -->
  <template id="news-list-template">
    <ul style="border: 1px solid blue; padding: 10px;">
      <news-item v-for="news in newsArray" :id="news.id" :title="news.title" :content="news.content" @del="del">
      </news-item>
    </ul>
  </template>
  <!-- 子组件模板 -->
  <template id="news-item-template">
    <li style="border: 1px solid green; padding: 10px;">
      <span>新闻ID: {{ id }}</span><br />
      <span>标题：{{ title }}</span><br />
      <span>内容：{{ content }}</span>
      <span><button @click="delMe(id)">删除</button></span>
    </li>
  </template>
  <script src="js/vue.js"></script>
  <script src="https://unpkg.com/axios@1.6.7/dist/axios.min.js"></script>

  <script>
    // 创建子组件
    const newsItem = {
      // 引用子组件模板
      template: '#news-item-template',
      // 声明子组件接收父组件传递的值
      props: ['id', 'title', 'content'],
      methods: {
        delMe(id) {
          // 调用父组件传递的方法
          this.$emit('del', id);
        }
      }
    }
    // 创建父组件
    const newsList = {
      // 引用父组件模板
      template: '#news-list-template',
      components: {
        // 注册子组件
        'news-item': newsItem
      },
      data() {
        return {
          // 数据转移到news.json文件
          newsArray: []
        }
      },
      created() {
        // 通常我们会在created中发送请求获取数据
        this.loadNewsList();
      },
      methods: {
        // 发送axios请求获取新闻列表
        loadNewsList() {
          axios.get('data/news.json', {
              params: {
                // 传递参数
                page: 1,
                size: 10
              },
              headers: {
                // 请求头信息
                token: "123456abcdef"
              }
            })
           .then(response => {
              // 获取到新闻列表数据
              this.newsArray = response.data;
            })
           .catch(error => {
              console.log('请求出错：', error);
            });
        },
        del(id) {
          // 删除指定id的新闻
          const index = this.newsArray.findIndex(item => item.id === id);
          this.newsArray.splice(index, 1);
        }
      }
    };
    // 创建Vue实例，并将父组件注册到Vue实例中
    const app = new Vue({
      el: '#app',
      components: {
        // 注册父组件
        'news-list': newsList,
      }
    })
  </script>
</body>

</html>